<template>
    <el-table :data="data" ref="elTable" size="small" style="width: 100%" border highlight-current-row
         :row-key="rowKey"
        :tree-props="{ hasChildren: 'hasChildren', children: 'children' }" resizable
        @selection-change="handleSelectionChange" @current-change="currentChange" :max-height="maxHeight"
        :height="height" @sort-change="tableSortChange" @row-click="rowClick" :header-cell-style="{background:'rgb(198, 226, 255)',color:'#606266','text-align':'center'}">

        <slot></slot>

        <div slot="empty">
            <div class="avue-empty">
                <div class="avue-empty__image" style="height: 50px;"><img
                        src=""
                        alt=""></div>
                <p class="avue-empty__desc">暂无数据</p>
            </div>
        </div>
    </el-table>
</template>
<script>
    export default {
        props: {
            data: { // 表格数据
                type: Array,
                required: true,
                default: function () {
                    return [];
                }
            },
            icon: {
                type: String,
                default: ""
            },
            rowKey: {
                type: String,
                default: ""
            },
            maxHeight: {
                type: [Number, String]
            },
            height: {
                type: [Number, String]
            }
        },
        data() {
            return {}
        },
        methods: {
            // 复选框选中
            handleSelectionChange(val) {
                this.$emit('selection-change', val)
            },
            // 切换行
            currentChange(row) {
                this.$refs.elTable.setCurrentRow(row);
                this.$refs.elTable.clearSelection();
                this.$refs.elTable.toggleRowSelection(row);
                this.$emit('current-change', row)
            },
            // 触发表格排序
            tableSortChange(val) {
                this.$emit('sort-change', val)
            },
            // 单击行选中复选框
            rowClick(row, event, column) {
                this.$emit('row-click', row, event, column)
            }
        }
    }
</script>